<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Display 属性</title>
    <style>
    .block-div{
        background-color: antiquewhite;
        height: 100px;
        display: block;
    }
    .inline-div{
        display: inline;
    }
    .none-style{
        display: none;
    }
    </style>
</head>
<body>
    <!-- 
        display 是CSS中最重要的用于控制布局的属性。
        每个元素都有一个默认的 display 值，这与元素的类型有关。
        对于大多数元素它们的默认值通常是 block 或 inline 。
        一个 block 元素通常被叫做块级元素。
        一个 inline 元素通常被叫做行内元素。
     -->
    <h1>block</h1>
    <!-- div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。 -->
    <div class="block-div"></div>

    <h1>inline</h1>
    <!-- 
        span 是一个标准的行内元素。
        一个行内元素可以在段落中 <span> 像这样 </span> 包裹一些文字而不会打乱段落的布局。 
        a 元素是最常用的行内元素，它可以被用作链接。
     -->
     <div class="inline-div">我们可以发现</div>
     <span>这两个效果一样</span>

     <h1>none </h1>f12 检查元素看效果
     <!-- 请查看源代码 -->
     <p class="none-style">略略略，你看不见我。</p>
     <!-- 它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间。 -->

     
</body>
</html>